let tableArr = [
    {
        first: '', title: '孟小弦发起一个新的考试指定由您处理', time: '2018-04-10 09:00', read: '已读', id: 1
    },
    {
        first: '', title: '张小弦发起一个新的考试指定由您处理', time: '2018-04-10 09:00', read: '已读', id: 2
    },
    {
        first: '', title: '李小弦发起一个新的考试指定由您处理', time: '2017-04-10 09:00', read: '已读', id: 3
    },
    {
        first: '', title: '谢小弦发起一个新的考试指定由您处理', time: '2020-04-10 09:00', read: '已读', id: 4
    },
    {
        first: '', title: '孟小弦发起一个新的考试指定由您处理', time: '2019-04-10 09:00', read: '已读', id: 5
    },
    {
        first: '', title: '孟小弦发起一个新的考试指定由您处理', time: '2019-04-10 09:00', read: '已读', id: 6
    },
]
let oTbody = document.querySelector('tbody');
let odelBtn = document.querySelector('.del-btn');
let oPagination = document.querySelector('.pagination');
let oSearchbtn = document.querySelector('.btnSearch');
let oseacherCon = document.querySelector('.search-con');
let oseacherCon2 = document.querySelector('.search-con2');
let oresetBtn = document.querySelector('.btnReset');
let opromptDailog = document.querySelector('.gl_prompt-dialog');
let oSelectPage = document.querySelector('.select-page');
let iNow = 1;
let count = 5;
let count1 = 3;
let count2 = 4;
let delId = 0;
let pageSs;
//表格内容插入功能
function render(arr, x) {
    if (pageSs == count) {
        x = count;
    } else if (pageSs == count2) {
        x = count2;
    } else if (pageSs == count1) {
        x = count1;
    }
    else {
        x = count;
    }
    let str = '';
    let renderData = arr.slice((iNow - 1) * x, iNow * x);
    for (let i = 0; i < renderData.length; i++) {
        str += `
        <tr>
            <td>${renderData[i].first}</td>
            <td class="td1">${renderData[i].title}</td>
            <td>${renderData[i].time}</td>
            <td><span>●</span>&nbsp;${renderData[i].read}</td>
            <td data-id="${renderData[i].id}">
            <button data-toggle="modal" data-target="#delModal" class="del">删除</button>
            </td>
        </tr> 
    `
    }
    oTbody.innerHTML = str;

    //分页功能
    let leftPage = `<li>
<a class="left" href="#" aria-label="Next">
  <span class="left" aria-hidden="true"><span
      class="glyphicon glyphicon-menu-left left"></span></span>
</a>  
</li>
`
    let rightPage = `<li>
<a class="right" href="#" aria-label="Next">
  <span class="right" aria-hidden="true"><span
      class="glyphicon glyphicon-menu-right right"></span></span>
</a>
</li>
`
    let pageStr = '';
    for (let i = 1; i <= Math.ceil(arr.length / count); i++) {
        if (iNow == i) {
            pageStr += `<li class="active"><a href="#">${i}</a></li>`

        } else {
            pageStr += `<li><a href="#">${i}</a></li>`
        }

    }
    oPagination.innerHTML = leftPage + pageStr + rightPage;


    //页码跳转
    oSelectPage.addEventListener('click', function () {
        let optStr = oSelectPage.value;
        switch (optStr) {
            case '5条/页':
                pageSs = count;
                render(arr, pageSs);
                break;
            case '4条/页':
                pageSs = count2;
                render(arr, pageSs);
                break;
            case '3条/页':
                pageSs = count1;
                render(arr, pageSs);
                break;
        }
    })
}
render(tableArr, pageSs);
//删除功能
oTbody.addEventListener('click', function (e) {
    if (e.target.className.includes('del')) {
        delId = e.target.parentNode.dataset.id;
        console.log(delId)
    }
})
odelBtn.addEventListener('click', function () {
    console.log(1)
    for (let i = 0; i < tableArr.length; i++) {
        console.log(tableArr[i])
        if (tableArr[i].id == delId) {
            tableArr.splice(i, 1);
            // render(studentArr);
            // return;
            let renderData = tableArr.slice((iNow - 1) * count, iNow * count);
            if (renderData.length == 0 && iNow > 1) {
                iNow--;
            }
            oseacherCon = '';
            oseacherCon2 = '';
            render(tableArr);
            return;

        }
    }
})
//页码点击功能
function pageJum(e) {
    console.log(e.target);
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(tableArr.length / 5)) {
            iNow++;
        }
    } else {//数字键
        iNow = e.target.innerText.trim();
    }
    render(tableArr, pageSs);

}
function pageJum1(e) {
    console.log(e.target);
    if (e.target.className.includes('left')) {
        if (iNow > 1) {
            iNow--;
        }
    } else if (e.target.className.includes('right')) {
        if (iNow < Math.ceil(searchArr.length / 5)) {
            iNow++;
        }
    } else {//数字键
        iNow = e.target.innerText.trim();
    }
    render(searchArr, pageSs);

}
oPagination.addEventListener('click', pageJum);
//搜索
let searchArr;
oSearchbtn.addEventListener('click', function () {
    iNow=1;
    if (oseacherCon.value == '' && oseacherCon2.value == '') {
        return;
    }
    searchArr = [];
    let str = oseacherCon.value;
    let str1 = oseacherCon2.value;

    for (let i = 0; i < tableArr.length; i++) {
        if (tableArr[i].title.includes(str) && tableArr[i].time.includes(str1)) {
            searchArr.push(tableArr[i]);
        }
        oPagination.removeEventListener('click', pageJum);
        oPagination.addEventListener('click', pageJum1)
    }
    if (searchArr.length == 0) {

    } else {
        render(searchArr, pageSs);
    }
})
//重置按钮
oresetBtn.addEventListener('click', function () {
    window.location.href=('../pages/per_message.html')

})
